<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
	.box{
		width: 50PX; height: 50PX; background: #cccccc; margin: 10px auto;
	}
</style>
		<!-- <div class="box">小</div></br>
		<div class="box">小</div></br>
		<div class="box">小</div> -->
		
		<div class="box">1</div></br>
		<div class="box">2</div></br>
		<div class="box">3</div>
		
		
</head>
<body>
	<script>
		//闭包函数的学习
		//获取数组 元素
		var boxs=document.getElementsByClassName('box');
		for(var box of boxs){
			//console.log(box);
			//添加点击事件
			box.onclick=function(){
				this.style.width="100px";
				this.style.height="100px";
				this.innerHTML="大";
				
				
				
				
			//3 console.log(box);
			//  box.style.width="100px";
		 // 	box.style.height="100px";
		 // 	box.innerHTML="大";
		 
		 
		 
		};
			
			
		//2 function(){//内外层循环是不一样的
		// 		box.style.width="100px";
		// 		box.style.height="100px";
		// 		box.innerHTML="大";
		// };
		
		
	}
	</script>
</body>
</html>

